import React, {Component} from 'react';

import {
StyleSheet,
    Text,
    View,
    TouchableOpacity,
    TextStyle,
    ViewStyle
} from 'react-native';


interface Iprops{
    buttonStyle?: ViewStyle | ViewStyle[],
    text: string,
    onPress?: Function,
    enable?: boolean,
    textStyle?: TextStyle | ViewStyle[],
}

class NccButton extends Component<Iprops, any> {
    constructor(props:Iprops){
        super(props);
    }

    renderBtn = () => {
        const {enable = true, text, onPress, buttonStyle, textStyle} = this.props;
        if (enable === true) {
            return(
                <TouchableOpacity
                    activeOpacity={1}
                    onPress={() => {
                        onPress && onPress();
                    }}
                    style={[styles.button, buttonStyle]}>
                    <View style={styles.viewText}>
                        <Text style={[styles.textMeg, textStyle]}>{text}</Text>
                    </View>
                </TouchableOpacity>
            );
        } else {
            return(
                <View style={[styles.button, buttonStyle, styles.buttonNotEnable]}>
                    <View style={styles.viewText}>
                        <Text style={styles.textMeg}>{text}</Text>
                    </View>
                </View>
            );
        }
    };

    render () {
        return this.renderBtn()
    }
}

export default NccButton;

const styles = StyleSheet.create({
    viewText: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    textMeg: {
        color: 'white',
        fontSize: 15,
    },
    button: {
        height: 40,
        // borderRadius: 5,
        backgroundColor: '#1e90ff',
        justifyContent: 'center',
        alignItems: 'center'
    },
    buttonNotEnable: {
        backgroundColor: '#B8B8B8',
    }
});